<template>
  <a-card :bordered="false">
    <a-drawer
      width="100%"
      :title="'设计模板['+record.name+']'"
      :placement="placement"
      :closable="true"
      :visible="visible"
      @close="onClose">
      <a-spin tip="加载中请稍后..." :spinning="spinning" size="large">
        <a-row :gutter="24">
          <a-col :md="5">
            <div class="table-operator">
              <!-- <a-button size="small" type="primary" icon="plus" @click="resetContent">保存</a-button> -->
              <!-- <a-button size="small" type="primary" icon="plus">创建模板</a-button>
            <a-button size="small" type="primary" icon="plus">创建目录</a-button> -->
            </div>
            <div class="code" @click="clickBlank">
              <a-dropdown :trigger="['contextmenu']" :visible="dropdownVisible">
                <div style="max-height: 800px;overflow-y: auto;">
                  <a-directory-tree
                    multiple
                    :selectedKeys="selectedKeys"
                    defaultExpandAll
                    :treeData="treeData"
                    @select="onSelect"
                    @rightClick="rightClick"> </a-directory-tree>
                </div>
                <a-menu slot="overlay">
                  <a-menu-item key="1" v-show="!rightFile.isLeaf">
                    <a-icon type="folder-add" />
                    <span @click="createFile(rightFile,1)">创建目录</span>
                  </a-menu-item>

                  <a-menu-item key="2" v-show="!rightFile.isLeaf">
                    <a-icon type="file-add" />
                    <span @click="createFile(rightFile,0)">创建文件</span>
                  </a-menu-item>

                  <a-menu-item key="5" v-show="!rightFile.isLeaf">
                    <a-icon type="file-add" />
                    <span @click="createFragmentFile(rightFile)">创建片段</span>
                  </a-menu-item>

                  <a-menu-item key="6" v-show="!rightFile.isLeaf">
                    <a-icon type="folder-open" />
                    <span @click="openFile">打开位置</span>
                  </a-menu-item>

                  <a-menu-item key="7" v-show="rightFile.isLeaf && !rightFile.disabled" v-if="rightFile.isFragment">
                    <a-icon type="setting" />
                    <span @click="designFragmentFile">设计片段</span>
                  </a-menu-item>

                  <a-menu-item key="8" v-show="rightFile.isLeaf && !rightFile.disabled" v-if="rightFile.isFragment">
                    <a-icon type="database" />
                    <span @click="fillFragmentFile">填充片段</span>
                  </a-menu-item>

                  <a-menu-item key="3" v-show="!rightFile.disabled">
                    <a-icon type="delete" />
                    <span @click="deleteFile">删除文件</span>
                  </a-menu-item>

                  <a-menu-item key="4" v-show="rightFile.disabled">
                    <a-icon type="reload" />
                    <span @click="addFileOk">刷新文件</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </a-col>
          <a-col :md="19">
            <div class="table-operator">

            </div>
            <div class="code">
              <codemirror ref="codemirror" @ctrls="ctrls"></codemirror>
            </div>
          </a-col>
        </a-row>
        <create-file ref="createFile" @ok="addFileOk"></create-file>
        <create-fragment ref="createFragment" @ok="addFileOk"></create-fragment>

        <a-drawer :title="childDrawerTitle" width="80%" :closable="true" :visible="childrenDrawer" @close="onChildrenDrawerClose">
          <a-spin tip="加载中请稍后..." :spinning="drawerSpinning" size="large">
            <design-fragment ref="designFragment" @ok="addFileOk" @close="onChildrenDrawerClose"></design-fragment>
          </a-spin>
        </a-drawer>

        <a-drawer :title="childDrawerTitle" width="80%" :closable="true" :visible="childrenDrawerData" @close="onChildrenDrawerDataClose">
          <design-fragment-data v-if="childrenDrawerData" ref="designFragmentData" @ok="addFileOk" @close="onChildrenDrawerDataClose"></design-fragment-data>
        </a-drawer>

      </a-spin>
    </a-drawer>
  </a-card>
</template>

<script>
  import Codemirror from '@/components/Codemirror/Codemirror.vue'
  import createFile from './createFile.vue'
  import createFragment from './createFragment.vue'
  import designFragment from './designFragment.vue'
  import designFragmentData from './designFragmentData.vue'

 import {
  loadTempTree,
  getFileContent,
  setFileContent,
  delFile,
  openFile,
  checkerIsStartTemplate
 } from '@/api/site/template'
  export default {
    components: {
      Codemirror,
      createFile,
      designFragment,
      createFragment,
      designFragmentData
    },
    data () {
      return {
        visible: false,
        childrenDrawerData: false,
        childrenDrawer: false,
        childDrawerTitle: '设计片段',
        spinning: true,
        drawerSpinning: false,
        dropdownVisible: false,
        placement: 'right',
        treeData: [],
        fileInfo: null,
        rightFile: {
          isLeaf: false
        },
        selectedKeys: [],
        record: {
          name: null
        }
      }
    },
    watch: {
       childrenDrawer (val, old) {
          this.dropdownVisible = false
       },
       childrenDrawerData (val, old) {
          this.dropdownVisible = false
       },
       visible (val, old) {
          this.dropdownVisible = false
       }
    },
    methods: {
      openDesign (record) {
        this.record = record
        this.loadFiles(record.id)
        // this.reloadFile()
        this.showDrawer()
      },
      loadFiles (id) {
        loadTempTree({ id: id }).then(response => {
          if (response.code === 0) {
             this.treeData = response.res
             this.spinning = false
          }
        })
      },
      addFileOk () {
        this.loadFiles(this.record.id)
      },
      onSelect (selectedKeys, e) {
        // console.log(e)
        this.selectedKeys = [e.node.eventKey]
        const fileInfo = e.node.dataRef
        this.fileInfo = fileInfo
        this.dropdownVisible = false
        this.getFileContent(fileInfo)
      },
      reloadFile () {
         this.getFileContent(this.fileInfo)
      },
      rightClick (e) {
        this.selectedKeys = [e.node.eventKey]
        this.rightFile = e.node.dataRef
        this.dropdownVisible = true
      },
      ctrls () {
        this.resetContent()
      },
      deleteFile () {
        const path = this.rightFile.path
        const title = this.rightFile.title
        const that = this
        this.$confirm({
          title: '操作提醒',
          content: '确定要删除' + title + '吗?',
          onOk () {
            delFile({
              path: path
            }).then(response => {
              that.loadFiles(that.record.id)
              that.$message.info(response.msg)
            }).catch((response) => {
              that.$message.warn(response.msg)
            })
          },
          onCancel () {}
        })
      },
      openFile () {
         const path = this.rightFile.path
         openFile({ path: path }).then(response => {
            if (response.code !== 0) {
               this.$message.error('文件打开失败,请确保您在window 环境下使用!')
            }
         })
      },
      createFile (file, type) {
        this.$refs.createFile.createFile(file, type)
      },
      createFragmentFile (file) {
        this.$refs.createFragment.createFile(file, this.record)
      },
      designFragmentFile () {
         this.drawerSpinning = true
         this.childDrawerTitle = '设计片段【' + this.rightFile.title + '】'
         this.showChildrenDrawer(this.rightFile)
      },
      fillFragmentFile () {
         this.childDrawerTitle = '填充片段【' + this.rightFile.title + '】'
         this.showChildrenDrawerData(this.rightFile)
      },
      getFileContent (fileInfo) {
         if (fileInfo && fileInfo.isLeaf) {
           getFileContent({ path: fileInfo.path }).then(response => {
             if (response.code === 0) {
               this.setcodemirror(response.res)
             }
           })
         }
      },
      resetContent () {
        if (this.fileInfo) {
          const content = this.getcodemirror()
          const path = this.fileInfo.path
          this.setFileContent(content, path)
        }
      },
      setFileContent (content, path) {
         setFileContent({ content: content, path: path }).then(response => {
            if (response.code === 0) {
               this.$message.info('~保存成功~')
            } else {
               this.$message.error(response.msg)
            }
         })
      },
      setcodemirror (content) {
         this.$refs.codemirror.setCodeContent(content)
      },
      clearcodemirror () {
         this.$refs.codemirror.clear()
      },
      getcodemirror () {
         return this.$refs.codemirror.getCodeContent()
      },
      showDrawer () {
        this.visible = true
      },
      showChildrenDrawer (fileItem) {
            const _this = this
            this.childrenDrawer = true
            setTimeout(() => {
              _this.$refs.designFragment.init(fileItem, this.record.id)
              _this.drawerSpinning = false
            }, 400)
      },
      showChildrenDrawerData (fileItem) {
          this.checkerStartTemplate(fileItem, this.record.id)
      },
      checkerStartTemplate (fileItem, templateId) {
         const _this = this
        checkerIsStartTemplate({ templateId: templateId }).then(response => {
           if (response.code === 0) {
              _this.childrenDrawerData = true
              setTimeout(() => {
                _this.$refs.designFragmentData.init(fileItem, templateId)
              }, 200)
           } else {
             this.$message.error(response.msg)
           }
        })
      },
      onChildrenDrawerClose () {
            this.childrenDrawer = false
      },
      onChildrenDrawerDataClose () {
            this.$refs.designFragmentData.close()
            this.childrenDrawerData = false
      },
      onClose () {
        this.selectedKeys = []
        this.visible = false
        this.clearcodemirror()
      },
      onChange (e) {
        this.placement = e.target.value
      },
      clickBlank () {
        this.dropdownVisible = false
      }
    }
  }
</script>
<style type="text/css">
  .code {
    border: 0.5px solid #e8e8e8;
    height: 800px;
    /* background-color: #2B2B2B;*/
  }

  .CodeMirror {
    min-height: 798px !important;
    overflow-y: scroll !important;
    /* background-color: rgb(230, 225, 218) */
  }
</style>
